<template>
  <transition name="slide">
    <div class="order-container" ref="wrapper">
        <div class="order-list">
          <div class="order-item" v-for="item in orderList" :key="item.id" @click="toOrderDetail(item.id)">
            <div class="order-title">
              <div class="order-title">{{item.topackagename}}</div>
              <div class="order-status">{{orderStatus[item.ispaid]}}</div>
            </div>
            <div class="order-body">
              <div class="user-name-container">
                <div class="list-item-title">体检姓名</div>
                <div>{{item.touserpname}}</div>
              </div>
              <div class="test-time-container">
                <div class="list-item-title">体检时间</div>
                <div class="time">{{item.reservetime.split(' ')[0]}}</div>
              </div>
              <div class="text-orderid-container">
                <div class="list-item-title">订单编号</div>
                <div>{{item.orderid}}</div>
              </div>
            </div>
          </div>
          <!-- <div class="order-item" @click="toOrderDetail(7)">
            <div class="order-title">
              <div class="order-title">123</div>
              <div class="order-status">123</div>
            </div>
            <div class="order-body">
              <div class="user-name-container">
                <div class="list-item-title">体检姓名</div>
                <div>12312</div>
              </div>
              <div class="test-time-container">
                <div class="list-item-title">体检时间</div>
                <div class="time">123123</div>
              </div>
              <div class="text-orderid-container">
                <div class="list-item-title">订单编号</div>
                <div>dfadfj123123</div>
              </div>
            </div>
          </div> -->
        </div>
        <router-view></router-view>
    </div>
  </transition>
</template>

<script>
import BScroll from 'better-scroll'
import { http } from 'api/main'

export default {
  data () {
    return {
      orderList: [],
      orderStatus: ['未支付', '已支付']
    }
  },
  created() {
    this._getOrderList()
  },
  mounted() {
    setTimeout(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true
      })
    }, 20)
  },
  methods: {
    toOrderDetail(id) {
      this.$router.push({
        path: `/user/order/${id}`
      })
    },
    _getOrderList() {
      http('order').then((res) => {
        console.log(res)
        this.orderList = res
      })
    }
  },
  components: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped scoped lang="stylus" rel="stylesheet/stylus">
@import "order.styl"

.slide-enter-active,
.slide-leave-active
  transition all 0.3s
.slide-enter,
.slide-leave-to
  transform: translate3D(100%, 0, 0)
</style>
